<template>
  <!-- 客户信息查询 -->
  <Card>
    <Form :model="form" ref="form" :rules="rules" label-position="right" label-width="90">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.salechnl" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" placeholder="请选择" clearable>
              <Option v-for="item in organizationList" :key="item.key" :value="item.key">{{item.value}}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构" prop="agentgroup">
            <Select v-model="form.agentgroup" clearable @on-change="val=>getBranchmanager(val,{fileByte:'groupDistrict'})">
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组">
            <Select v-model="form.branchmanager" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="客户号">
            <Input v-model="form.appntno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="客户姓名">
            <Input v-model="form.appntname" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="保单号">
            <Input v-model="form.contno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="交费日期" prop="date1">
            <!-- <DatePicker v-model="form.PayableRange" type="date" placeholder="请选择" :editable="false" style="width:100%">
            </DatePicker> -->
            <DatePicker :value="date1" transfer @on-change="dateChange($event, ['dealbegintime','dealendtime'])"
              format="yyyy-MM-dd" type="daterange" placeholder="请选择" />
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="应交日期">
            <!-- <DatePicker v-model="form.PayableRange" type="daterange" placeholder="请选择" :editable="false"
              style="width:100%" @on-change="changePayableRange"></DatePicker> -->
            <DatePicker v-model="date2" @on-change="dateChange($event, ['paytodatebegintime','paytodateendtime'])"
              format="yyyy-MM-dd" type="daterange" placeholder="请选择" />
          </FormItem>
        </i-col>
        <i-col span="18" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadResources" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <Button @click="resetForm()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>

    <Table :columns="columns" :data="tableData" style="margin-top:10px">
      <!-- <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="relatedPoliciesModal = true">查看详情</span>
      </template> -->
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.index" :page-size="ipagination.pageSize"
      transfer></Page>
  </Card>
</template>

<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
export default {
  name: "clientInfo",
  mixins: [getSelectListMixin,loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "paymentRecordList",
        disableMixinCreated: true,
      },
      agentgroupList: [],
      saleChannelList: [],
      organizationList: [],
      groupDistrictList: [], //区部组
      branList: [],
	  date1:[],
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
		  width:70
        },
        {
          title: "客户号",
          key: "appntno",
          align: "center",
		  minWidth:120
        },
        {
          title: "客户姓名",
          key: "appntname",
          align: "center",
		  width:120,
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
		  minWidth:120
        },
        {
          title: "交费日期",
          key: "dealdate",
          align: "center",
		  width:120,
        },
        {
          title: "交易金额",
          key: "dueprem",
          align: "center",
		  width:120,
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
		  width:120,
        },
        {
          title: "专员",
          key: "renewalname",
          align: "center",
		  width:120,
        },
        {
          title: "业务员",
          key: "agentname",
          align: "center",
		  width:120,
        },
        // {
        //   title: "相关保单",
        //   key: "operate",
        //   align: "center",
        //   width: "130",
        //   fixed: "right",
        // },
      ],
	  rules: {
		managecom:[{
            required: true,
            message: "请选择管理机构",
			type: 'string'
          }],
        date1: [
          {
            required: true,
            message: "应交日期不能为空",
            type: 'daterange',
			// type: 'string',
			// fields:{
			// 	0:{type:"string",required: true,message: "应交日范围不能为空"},
			// 	1:{type:"string",required: true,message: "应交日范围不能为空"}
			// }
          }
        ]
      }
    };
  },
  mounted() {
  },
  methods: {
    checkMust() {
      let { appntno, appntname, contno } = this.form;
      console.log(this.date1);
	  if (!this.form.managecom) {
        this.$Message.info("请选择管理机构");
        return false;
      }else if (!this.form.dealbegintime) {
        this.$Message.info("请选择交费日期");
        return false;
      }else if (!appntno && !appntname && !contno) {
        this.$Message.info("请输入客户号、客户姓名或者保单号");
        return false;
      } else return true;
    },
    dateChange(e, arr) {
      arr.forEach((fileByte, index) =>
        this.$set(this.form, fileByte, e[index])
      );
    },    
  },
};
</script>
<style lang="less">
.ivu-icon-ios-loading, .ivu-input-icon-validate{display: none !important;}
</style>